<template>
	<view class="wrap-date-screen flex" :style="'top:' + navigationHeight + 'px;'">
		<view
			class="date-item flex align-center just-center f-28"
			:class="{ active: chooseIndex === 0 }"
			@click="onCurrentMonth"
		>
			当月
		</view>

		<view class="date-item flex align-center just-center f-28" @click="onDateScreen">
			<view :class="{ active: chooseIndex === 1 }"> 日期筛选</view>

			<image
				v-if="chooseIndex === 1"
				class="arrow"
				:class="{ 'arrow-trans': isShow }"
				:src="getImageURL('mine/arrow_down_theme.png')"
			/>

			<image v-else class="arrow" :src="getImageURL('mine/arrow_down.png')" :class="{ 'arrow-trans': isShow }" />
		</view>

		<view
			:style="'top: calc(' + navigationHeight + 'px + 88rpx);'"
			class="date-pop"
			@touchmove.stop.prevent
			v-show="isShow"
			@click.stop="onDismiss"
		>
			<view class="pop-white" @click.stop.prevent>
				<view class="start-end flex">
					<picker
						mode="date"
						@change="onDateChange('start', $event)"
						:value="start_date === '' ? end_date : start_date"
						:start="getStartDate(end_date)"
						:end="end_date"
					>
						<view class="item flex column align-center just-center">
							<view class="title f-28"> 开始时间 </view>

							<view class="sub-title f-28" :class="{ activeColor: start_date !== '' }">
								{{ start_date === "" ? "开始时间" : start_date }}
							</view>
						</view>
					</picker>

					<picker
						mode="date"
						:start="start_date"
						@change="onDateChange('end', $event)"
						:value="end_date === '' ? start_date : end_date"
						:end="getEndDate(start_date)"
					>
						<view class="item flex column align-center just-center">
							<view class="title f-28"> 结束时间 </view>

							<view class="sub-title f-28" :class="{ activeColor: end_date !== '' }">
								{{ end_date === "" ? "结束时间" : end_date }}
							</view>
						</view>
					</picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const scrrenMaxMonth = 3;
	export default {
		data() {
			return {
				navigationHeight: this.$navigationHeight,
				chooseIndex: 0,
				start_date: "",
				end_date: "",

				isShow: false,
			};
		},
		methods: {
			/**
			 * 关闭日期筛选
			 */
			onDismiss() {
				this.isShow = false;
			},
			/**
			 * 当月
			 */
			onCurrentMonth() {
				this.onDismiss();
				this.chooseIndex = 0;
				this.start_date = "";
				this.end_date = "";
			},
			/**
			 * 日期筛选
			 */
			onDateScreen() {
				this.chooseIndex = 1;
				this.isShow = !this.isShow;
			},

			/**
			 * 选择时间
			 */
			onDateChange(type, e) {
				const date = e.detail.value;
				if (type === "start") {
					this.start_date = date;
				} else if (type === "end") {
					this.end_date = date;
				}
			},

			/**
			 * 根据时间获取做大选择的年月日
			 */
			getEndDate(startDate) {
				if (startDate === "") {
					return "";
				} else {
					const dateArray = startDate.split("-");
					const year = parseInt(dateArray[0]);
					const month = parseInt(dateArray[1]);
					const day = parseInt(dateArray[2]);

					let date = "";
					if (month + scrrenMaxMonth > 12) {
						date =
							(year + 1).toString() +
							"-" +
							(month + scrrenMaxMonth - 12).toString().padStart(2, "0") +
							"-" +
							day.toString().padStart(2, "0");
					} else {
						date =
							year.toString() +
							"-" +
							(month + scrrenMaxMonth).toString().padStart(2, "0") +
							"-" +
							day.toString().padStart(2, "0");
					}
					return date;
				}
			},
			/**
			 * 根据时间获取做小选择的年月日
			 */
			getStartDate(endDate) {
				if (endDate === "") {
					return "";
				} else {
					const dateArray = endDate.split("-");
					const year = parseInt(dateArray[0]);
					const month = parseInt(dateArray[1]);
					const day = parseInt(dateArray[2]);

					let date = "";
					if (month - scrrenMaxMonth < 1) {
						date =
							(year - 1).toString() +
							"-" +
							(12 + month - scrrenMaxMonth).toString().padStart(2, "0") +
							"-" +
							day.toString().padStart(2, "0");
					} else {
						date =
							year.toString() +
							"-" +
							(month - scrrenMaxMonth).toString().padStart(2, "0") +
							"-" +
							day.toString().padStart(2, "0");
					}

					return date;
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-date-screen {
		position: sticky;
		left: 0;
		width: 100%;
		height: 88rpx;
		z-index: 10;
		flex-wrap: wrap;
		overflow: hidden;
		background-color: white;

		.date-item {
			flex: 1;
			height: 88rpx;
			color: $title-color;
			overflow: hidden;

			.arrow {
				margin-left: 10rpx;
				width: 20rpx;
				height: 12rpx;
			}

			.arrow-trans {
				transform: rotate(180deg);
			}
		}
	}

	.date-pop {
		position: fixed;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
		background-color: rgba($color: #000000, $alpha: 0.5);

		.pop-white {
			width: 100%;
			border-top: 2rpx solid $separa-color;
			background-color: white;

			.start-end {
				width: 100%;
				height: 110rpx;
				flex-wrap: wrap;

				.item {
					width: 375rpx;
					height: 110rpx;

					.title {
						color: $title-color;
					}

					.sub-title {
						margin-top: 15rpx;
						color: $old-price-color;
					}
				}
			}
		}
	}
</style>
